<template>
  <div class="userdetail">
    <div class="bgdImg">
      <img src="../../assets/bannerTop_new.png" alt />
    </div>
    <div class="detail">
      <div class="userleft">
        <img v-if="userInfo.user_img" :src="userInfo.user_img" alt />
        <img v-else src="../../assets/default_img.jpg" alt />
      </div>
      <div class="userright">
        <div class="usertop">
          <p>
            <span>0</span>
            <span class="usertext">粉丝</span>
          </p>
          <span class="split"></span>
          <p>
            <span>10</span>
            <span class="usertext">关注</span>
          </p>
          <span class="split"></span>
          <p>
            <span>5</span>
            <span class="usertext">获赞</span>
          </p>
        </div>
        <div class="userbottom">
          <button @click="$router.push('/edit')" class="editbtn">编辑资料</button>
        </div>
      </div>
    </div>
    <div class="username">
      <h2 class="name">
        {{ userInfo.name }}
        <span
          class="iconfont"
          :style="{ color: userInfo.gender == 1 ? '#75b9eb' : ' #ff3ec9' }"
        >{{ userInfo.gender == 1 ? '&#xe610;' : '&#xe60f;' }}</span>
      </h2>

      <p v-if="userInfo.user_desc">{{ userInfo.user_desc }}</p>
      <p v-else>这个人很神秘，什么都没有写</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: ['userInfo'],
  created() {},
  methods: {},
}
</script>

<style lang="stylus" scoped>
.detail {
  display: flex;
  background-color: #fff;
}

.bgdImg {
  img {
    width: 100%;
    height: 25vw;
    overflow: hidden;
  }
}

.detail {
  padding: 0 4.167vw;
}

.userleft {
  margin-right: 5.556vw;
}

.userleft img {
  width: 23.333vw;
  height: 23.333vw;
  border-radius: 50%;
}

.userright {
  flex: 1;
  padding: 0 4.167vw;
}

.usertop {
  flex: 1;
  display: flex;
  font-size: 3.889vw;
  padding-top: 2.13333vw;

  p {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .split {
    margin-top: 1.389vw;
    border-left: 0.278vw solid #e7e7e7;
    height: 5vw;
  }

  .usertext {
    font-size: 3.333vw;
    color: #999;
    margin-top: 1.389vw;
  }
}

.editbtn {
  background: #fff;
  width: 100%;
  height: 8.333vw;
  border: 0.278vw solid #fb7299;
  color: #fb7299;
  border-radius: 1.06667vw;
  font-size: 3.73333vw;
  margin-top: 3.2vw;
}

.username {
  background-color: #fff;
  padding: 5.556vw 4.167vw 2.778vw;
}

.username h2 {
  font-size: 5vw;
  color: #212121;
}

.username p {
  margin-top: 3.889vw;
  font-size: 3.611vw;
  color: #999999;
}

.name {
  position: relative;
}

.iconfont {
  position: absolute;
  font-size: 3.611vw;
  left: 31.667vw;
}
</style>
